<template>
    <ekDialog
      v-model="ekVisiable"
      title="权限分配"
      @submit="handleSubmit"
      :hideBtn="disabled"
    >
      <div  class="ek-form" v-loading="loading">

        <el-form
          :model="form"
          :rules="rules"
          label-width="160px"
          ref="formRef"
          :disabled="disabled"
        >
          <ekTree
            ref="treeRef"
            :data="treeData"
            :defaultProps="{
              children: 'children',
              label: 'label',
              isLeaf: 'leaf',
              disabled: 'disabled',
              class: (node)=>{
                return node.className || ''
              },
            }"
            :check-strictly="true"
            :showCheckbox="true"
            :default-expand-all="true"
          />
        </el-form>
        
      </div>
    </ekDialog>

</template>

<script setup>
import {
  onMounted,
  getCurrentInstance,
  computed,
  ref,
  defineEmits,
  watch
} from "vue";
import { apis } from "../data.js";
import ekDialog from "@/components/business/ekDialog/index.vue";
import ekTree from "@/components/business/ekTree/index.vue";
import { arrayToTree } from "@/utils/common";
const props = defineProps({
  // 显示隐藏
  visiable: {
    type: Boolean,
    default: false,
  },
  rowId: {
    type: [String, Number],
    default: "",
  },
  title: {
    type: String,
    default: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});
const {
  appContext: {
    config: { globalProperties },
  },
} = getCurrentInstance();
const { $storage, $http, $ekLoading, $ekMessage } = globalProperties;

const emit = defineEmits(["update:visiable", "submit"]);

// 是否显示
const ekVisiable = computed({
  get() {
    return props.visiable;
  },
  set(value) {
    emit("update:visiable", value);
  },
});
const treeRef = ref(null);
function handleSubmit(done) {
  let nodes = treeRef.value.getCheckedNodes();
  let node_ids = nodes.map((item) => item.id);
  $http
    .post(apis.auth, {
      role_id: props.rowId,
      node_ids: node_ids,
    })
    .then((res) => {
      $ekMessage.success(res.message);
      emit("submit", done);
    })
    .catch((err) => {});
}
const loading = ref(false);
let formRef = ref(null);
let form = ref({
  role_name: "",
});
let treeData = ref([]);
async function getTree() {
  let res = await $http.get("/admin/basis/getTree?modelCode=MODEL_NODE&authCode=BTN_ROLE_AUTH");
  if (res.status == "success") {
    if (res.data?.length) {
      res.data.forEach((element) => {
        element.label = element.node_name;
        if(element.node_type == 2) {
          element.className = 'custom-function';
        }
        if(element.node_type == 3 || element.node_type == 4) {
          element.className = 'custom-btn';
        }
      });
      
      treeData.value = arrayToTree(res.data);
    }
  }
}

// 初始化表单
async function init() {

  // 详情或者编辑
  if (props.rowId) {
    let res = await $http.get(apis.getAuth, {
      params: {
         role_id: props.rowId,
      }
     
    });
    if (res.status == "success") {
      treeRef.value.setCheckedKeys(res.data.node_ids);
    }
  }
}
watch(
  () => props.visiable,
  async (val) => {
    if (val) {
      loading.value = true;
      await getTree();
      await init();
      loading.value = false;
    }
  }
);
onMounted(async () => {
 
});
</script>

<style scoped lang="scss">
::v-deep(.custom-function>.el-tree-node__children) {
  display: flex;
  flex-wrap: wrap;
  padding-left: 36px;
}
::v-deep(.custom-btn>.el-tree-node__content) {
  padding-left: 0px !important;
  width: 120px;
}
</style>
